<template>
  <div>
    <h2>自定义指令</h2>
    <p v-color="cc">我是文字</p>
    <input type="text" v-focus="">
    <my-test :uname="uname"></my-test>
  </div>
</template>

<script>
import MyTest from "./components/MyTest.vue";
export default {
  components: { MyTest },
  data() {
    return {
      cc: "red",
      uname:'zhangzhang'
    };
  },
  directives: {
    // 指令：{
    //   el表示使用这个指令的元素，obj.value表示指令的值
    
    //   bind(el,obj){}，只会执行一次，可以做一些初始化操作
    //   inserted(el,obj){}，只会执行一次
    //   update(el,obj){}，数据更新后，子组件的页面不一定会执行，他会执行
    //   componentUpdated(el,obj){}，数据更新后，包括子组件的数据、页面也更新后，他会执行
    //   unbind(el,obj){}，指令解绑的时候(组件销毁)，他会执行
    // }

    // color: {
    //   bind(el, obj) {
    //     el.style.color = obj.value;
    //   },
    //   update(el, obj) {
    //     el.style.color = obj.value;
    //   },
    // },
    // 指令(el,obj){}，如果指令只有bind和update方法，并且两个方法一样，则可以简写成函数
    color(el, obj) {
      el.style.color = obj.value;
    },
    focus:{
      inserted(el){
        el.focus()
      }
    }
  },
};
</script>

<style></style>
